<!-- 数据推送 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <!-- <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:DATA_PUSH:EXPORT')" @click.prevent="exportData()">导出</a> -->
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('REPORT:DATA_PUSH:ADD')"
              @click.prevent="generateQr()"
            >添加推送人员</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('REPORT:DATA_PUSH:BIND')"
              @click.prevent="bindPushContent()"
            >绑定推送内容</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index +1 }}</span>
                <!-- <span v-if="'content' == props.prop" @click.prevent="showModal(scope.row)" class="row-href">点击查看</span> -->
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="100"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-remarks_normal"
                  class="ake-icon-font"
                  title="添加备注"
                  v-if="isPermmited('REPORT:DATA_PUSH:ADD_REMARK')"
                  @click="addRemark('remarkModal', scope.row.id)"
                  plain
                ></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  title="删除"
                  v-if="isPermmited('REPORT:DATA_PUSH:DELETE')"
                  @click="deleteDataPush(scope.row.id)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="remarkModal" width="700" static="true">
      <h3 slot="title">添加备注</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="remark_form"
          :model="remark"
          label-position="left"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="备注" prop="content">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="remark.content"
              class="first-item"
              :maxlength="100"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitTypeForm('remark_form')"
        >保存</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('remarkModal')">取消</button>
      </div>
    </basic-modal>

    <basic-modal ref="qrModal" width="450" static="true">
      <h3 slot="title">添加推送人员</h3>
      <div class="modal-body" slot="modal-body">
        <div class="QrBox">
          <img :src="qrImg" alt />
        </div>
        <div class="spanBlue">
          <p>1.请先关注一点停微信公众号</p>
          <p>2.使用微信扫码进行绑定</p>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('qrModal')">关闭</button>
      </div>
    </basic-modal>

    <basic-modal ref="bindModal" width="700" static="true">
      <h3 slot="title">绑定推送内容</h3>
      <div class="modal-body" slot="modal-body">
        <div class="bindBox">
          <div class="leftBox">
            <h3>推送人员</h3>
            <el-radio-group v-model="weixinRadio">
              <el-radio
                v-for="weixinReport in weixinReports"
                :label="weixinReport.id"
                :key="weixinReport.id"
              >{{weixinReport.weixinId}}</el-radio>
            </el-radio-group>
          </div>
          <div class="rightB">
            <h3>推送报表</h3>
            <el-checkbox-group v-model="reportsSelected">
              <el-checkbox
                v-for="report in reports"
                :label="report.id"
                :key="report.id"
              >{{report.name}}</el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="reportsDisabledSelected">
              <el-checkbox
                v-for="report1 in reportsDisabled"
                :label="report1.id"
                :key="report1.id"
                disabled
              >{{report1.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitBind('bind_form')"
        >保存</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('bindModal')">取消</button>
      </div>
    </basic-modal>

    <basic-modal ref="bindedModal" width="700" static="true">
      <h3 slot="title">推送内容</h3>
      <div class="modal-body" slot="modal-body">
        <div class="bindBox">
          <div class="leftBox">
            <h3>推送人员</h3>
            <!-- <el-radio disabled v-model="radio" label="1" >{{weixined}}</el-radio> -->
            <el-checkbox-group v-model="radio">
              <el-checkbox
                v-for="weixined1 in weixinedList"
                :label="weixined1"
                :key="weixined1"
                disabled
              >{{weixined1}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="rightB">
            <h3>推送报表</h3>
            <el-checkbox-group v-model="dataPushReportsListSelected">
              <el-checkbox
                v-for="report in dataPushReportsList"
                :label="report.id"
                :key="report.id"
                disabled
              >{{report.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import BigPicModal from "@components/widgets/BigPicModal.vue";
import invokeModal from "@mixins/modal/invokeModal.js";

// image
import images from "@mixins/image.js";

// 引进vue的js
import data_push from "./js/data_push.js";
export default {
  name: "reportDataPush",
  mixins: [common, stardardList, invokeModal, images, data_push],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];
    return {
      fixedCols: 4,
      total: 0,
      remark: {
        content: ""
      },
      rules: {
        content: [
          { required: true, message: "请填写备注信息", trigger: "blur" }
        ]
      },
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "text",
          isShow: false,
          name: "query_weixinId",
          text: "微信号",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "query_createBy",
          text: "添加人",
          value: ""
        },

        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "添加时间",
          propName: "query_createTimeFrom,query_createTimeTo",
          value: "",
          style: { width: "360px" }
        },

        {
          type: "text",
          isShow: false,
          name: "query_remark",
          text: "备注",
          value: ""
        }
      ],
      theadsInfo: [
        { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "weixinId",
          text: "微信号",
          sortable: true,
          minWidth: 110
        },
        {
          index: 2,
          isShow: false,
          prop: "content",
          text: "推送报表",
          sortable: true,
          minWidth: 100
        },
        {
          index: 3,
          isShow: false,
          prop: "createTime",
          text: "添加时间",
          sortable: true,
          minWidth: 150
        },
        {
          index: 4,
          isShow: false,
          prop: "createBy",
          text: "添加人",
          sortable: true,
          minWidth: 100
        },

        {
          index: 5,
          isShow: false,
          prop: "remark",
          text: "备注",
          sortable: true,
          minWidth: 130
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less" scoped>
.bindBox {
  display: flex;
  h3 {
    margin: 15px 0;
  }
  > div {
    flex: 1;
    height: 440px;
    padding: 0 20px;
    margin: 10px;
    border: #ccc solid 1px;
    overflow-y: scroll;
    .el-radio-group,
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      .el-checkbox,
      .el-radio {
        margin-bottom: 6px;
        margin-left: 0;
      }
    }
  }
}
.QrBox {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.spanBlue {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #5588dd;
  margin-left: 6px;
  p {
    width: 46%;
    text-align: left;
  }
}
.ModalBody {
  padding: 20px 35px;

  .HeadMSG {
    display: flex;
    margin-bottom: 10px;
    li:first-child {
      margin-right: 20px;
    }
  }
}
</style>
